.type-container {
    width: 100%;
    min-height: 650px;
    margin: 60px auto;
}

.type-main {
    width: 95%;
    margin: 0 auto;
    min-height: 650px;
    margin-top: 2%;
    margin-bottom: 2%;
}

.type-main ul {
    /* 显示同一行 */
    display: flex;
    /*左右布局  */
    justify-content: center;
    /* 换行 然后你把上下间距和 honer的特效写一下  数据渲染就ok */
    flex-wrap: wrap;
    margin: 80px auto;
    border-radius: 10px;
}

.type-main ul li {
    width: 30%;
    margin: 15px 20px 20px 10px;
    height: 270px;
    box-shadow: 2px 2px 2px 2px #d1c9c9;
    background: #fff;
    border-radius: 10px;
}

.type-main ul li:hover {
    box-shadow: 5px 5px 5px #b6f8f8;
    transition: all .5s linear;
    transform: scale(1.04);
}

.type-main ul li img {
    width: 100%;
    height: 150px;
    border-radius: 10px 10px 0 0;
}

.type-main ul li h3 {
    height: 10px;
    margin-top: 1%;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.type-main ul li p {
    font-size: 14px;
    font-weight: 500;
    color: #b5b3b3;
    margin-left: 1%;
    margin: 26px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.type-main ul li hr {
    width: 100%;
    color: rgb(238, 233, 233);
    opacity: 0.5;
}

.type-main ul li i {
    padding: 5px;
}

.type-time {
    width: 100%;
    opacity: 0.5;
    font-size: 14px;
}

.type-add {
    float: right;
    margin-right: 14px;
    opacity: 0.5;
    font-size: 14px;
}